<template>
  <div class="order">
    <div class="order_message"> <OrderForm :order="orderData" @calculateTheTotalPrice="calculateTheTotalPrice" /> </div>
    <div class="order_ticket" v-if="orderData">
      <div class="order_ticket_data">
        <div class="order_start">
          <div>{{orderData.dep_datetime.split(' ')[0]}}</div>
          <div>{{orderData.dep_time}}</div>
          <div>{{orderData.org_airport_name}}</div>
        </div>
        <div class="timeDifference">
          <div>--{{timeDifference}}--</div>
          <div class="flight">{{orderData.airline_name}} {{orderData.flight_no}}</div>
        </div>
        <div class="order_end">
          <div>{{orderData.org_city_name}} - {{orderData.dst_city_name}}</div>
          <div>{{orderData.arr_time}}</div>
          <div>{{orderData.dst_airport_name}}</div>
        </div>
      </div>
      <div class="order_ticket_rest">
          <div>订单总价</div>
          <div>金额</div>
          <div>数量</div>
      </div>
      <div class="order_ticket_rest">
          <div>成人机票</div>
          <div>￥{{orderData.seat_infos.par_price}}</div>
          <div>×1</div>
      </div>
      <div class="order_ticket_rest">
          <div>机建 + 燃油</div>
          <div>￥{{orderData.airport_tax_audlet}}/人/单程</div>
          <div>×1</div>
      </div>
      <div class="cost">
          <div>应付总额</div>
          <div>￥{{Price}}</div>
      </div>
    </div>
  </div>
</template>

<script>
//import orderForm from '@/components/air/orderForm'
import { localeData } from 'moment';
export default {
    // components:{
    //     orderForm,
    // },
    data(){
        return {
            orderData: '',
            Price: '' ,
        }
    },
    created(){
        let data = this.$route.query
        let {id,seat_xid} = data
        this.$axios.get('/airs/'+id,{params:{seat_xid}})
        .then(res=>{
            this.orderData = res.data
            console.log(this.orderData);
        })
    },
    computed:{
        timeDifference(){ //计算时间差
            let startTime = this.orderData.dep_time.split(':')[0] * 60 + +(this.orderData.dep_time.split(':')[1])
            let endTime = this.orderData.arr_time.split(':')[0] * 60 + +(this.orderData.arr_time.split(':')[1])
            if(startTime > endTime){endTime + 24*60}
            let hour = parseInt((endTime - startTime) / 60)
            let minute = (endTime-startTime) - hour * 60
            return `${hour}小时${minute}分钟`
        }
    },
    methods: {
        calculateTheTotalPrice(data){
            console.log(data);
            let itmeId = setInterval(()=>{
                if(this.orderData){
                    clearInterval(itmeId)
                    let youjia = this.orderData.airport_tax_audlet
                    let geren = this.orderData.seat_infos.par_price
                    let baoxian = 0
                    data.insurances.forEach(id=>{
                        let da = this.orderData.insurances.find(v=>v.id==id)
                        baoxian += da.price
                    })
                    console.log(baoxian,youjia,geren);
                    this.Price = (baoxian + youjia + geren) * data.userPeople
                }
            })
        }
    }
};
</script>

<style lang="less" scoped>
.order {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.order_message {
  width: 620px;
}
.order_ticket {
  width: 350px;
  height: 300px;
  border: solid 1px #e2e2e2;
  margin-bottom: 10px;
  .order_ticket_data {
      display: flex;
      justify-content: space-between;
      padding: 20px 20px 14px;
      border-bottom: 1px dashed #e0e0e0;
    .order_start {
      div {
          font-size: 14px;
          &:nth-child(2){
              padding-top: 10px;
              font-size: 24px;
          }
          &:nth-child(3){
              padding-top: 4px;
              font-size: 12px;
              color: #a699a6;
          }
      }
    }
    .timeDifference {
        padding-top: 29px;
      div {
          font-size: 12px;
          color: #a699a6;
          text-align: center;
      }
    }
    .order_end {
        
      div {
          text-align: center;
          font-size: 14px;
          &:nth-child(2){
              padding-top: 10px;
              font-size: 24px;
          }
          &:nth-child(3){
              padding-top: 4px;
              font-size: 12px;
              color: #a699a6;
          }
      }
    }
  }
  .order_ticket_rest {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px dashed #e0e0e0;
      padding: 10px 20px;
      font-size: 14px;
  }
  .cost {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60px;
      padding: 20px;
      div{
          font-size: 14px;
          &:last-child{
              color: #ffad1d;
              font-size: 24px;
          }
      }
  }
}
</style>